<template>
  <div class="app-container">
    <div class="title">物料编码:{{}}</div>
    <div class="stage-box" style="padding-left: 50px">
      <div class="stage-title">采购</div>
      <div class="flex-box">
        <div
        class="flex-box center-box"
        style="margin-top: 20px"
        v-for="(item, index) in procureDataList"
        :key="item+index"
      >
        <div class="flow-section" style="position: relative">
          <div>{{ item.name }} </div>
          <div>{{ item.num }}</div>
          <div>{{ item.worker }} <span v-show="item.worker">|</span> {{ item.opeTime }}</div>
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
            "
            v-show="(item.result !='1') && item.index == 4"
          >
            <img src="./down-arrow.png" />不合格
            
          </div>
          <div v-show="(item.result !='1')  && item.index == 4">采购退料单</div>
        </div>
        <div style="position: relative; height: fit-content">
          <div style="position: absolute; top: -6px; left: 10px" v-show="item.result ==='1' && item.index === 4">合格</div>
          <img
            v-show="index< (procureDataList.length-1)"
            src="./right-arrow.png"
            style="height: fit-content; margin: 10px"
          />
        </div>
        <!-- <div>销售出库单</div> -->
      </div>
      </div>
      
    </div>
    <div class="stage-box" style="padding-left: 50px">
      <div class="stage-title">生产</div>
      <div class="flex-box">
        <span style="margin-right: 30px">工单编号：{{ produceData.workorderCode }}</span>
        <span>SN码：{{ produceData.snCode }}</span>
      </div>
      <div class="flex-box center-box" style="margin-top: 20px">
        <div class="flow-section">
          <div>{{  produceData.workstationName }}</div>
          <div>{{ produceData.workstationName }} | {{ produceData.userName }}</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 10px"
        />
        <div class="flow-section">
          <div>上料防错</div>
          <div>{{produceData.startReporting}}</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
        <div class="flow-section">
          <div>工位检验</div>
          <div>{{ produceData.checkTime }}</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
        <div class="flow-section">
          <div>报工</div>
          <div>{{ produceData.finishReporting }}</div>
        </div>
      </div>
    </div>
    <div class="stage-box" style="padding-left: 50px">
      <div class="stage-title">质检</div>
      <div class="flex-box">
        <span style="margin-right: 30px">工单编号：MQ005202</span>
        <span>SN码：80240710062</span>
      </div>
      <div class="flex-box center-box" style="margin-top: 20px">
        <div class="flow-section">
          <div>维修</div>
          <div>2024-08-16 10:24:37</div>
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <img
              src="./down-arrow.png"
              style="height: fit-content; margin: 10px 0"
            />
            不通过
          </div>
          <div>质量异常，返工生产</div>
        </div>
        <div style="position: relative">
          <div style="position: absolute; left: 20px; top: -4px">通过</div>
          <img
            src="./right-arrow.png"
            style="height: fit-content; margin: 10px"
          />
        </div>
        <div class="flow-section">
          <div>调试</div>
          <div>胡亚杰 | 2024-08-16 10:24:37 ～ 2024-08-16 10:24:37</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 10px"
        />
        <div class="flow-section" style="position: relative">
          <div>FQC检验</div>
          <div>刘磊 | 2024-08-16 10:24:37</div>
          <div style="position: absolute; left: 46px">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                width: fit-content;
              "
            >
              <img
                src="./down-arrow2.png"
                style="height: fit-content; height: 135px"
              />通过
            </div>
            <div class="flex-box" style="margin-left: -44px">
              <div>
                <div>产品入库单</div>
                <div>PRO202408150007</div>
                <div class="max-box">2024-08-15 16:20:30</div>
              </div>
              <img
                src="./right-arrow.png"
                style="height: fit-content; margin: 10px"
              />
              <div>
                <div class="max-box">执行入库</div>
                <div class="max-box">张斌 | 2024-08-15 16:20:30</div>
              </div>
              <img
                src="./right-arrow.png"
                style="height: fit-content; margin: 10px"
              />
              <div>
                <div class="max-box">PDA成品入库</div>
                <div class="max-box">张斌 | 2024-08-15 16:20:30</div>
              </div>
            </div>
          </div>
        </div>
        <div style="position: relative">
          <div style="position: absolute; left: 14px; top: -4px">不通过</div>
          <img
            src="./right-arrow.png"
            style="height: fit-content; margin: 10px"
          />
        </div>
        <div>质量异常，返工生产</div>
      </div>
    </div>
    <div class="stage-box" style="padding-left: 50px; height: 130px">
      <div class="stage-title">仓储</div>
      <div class="flex-box">
        <span style="margin-right: 30px">工单编号：MQ005202</span>
        <span>SN码：80240710062</span>
      </div>
    </div>
    <div class="stage-box" style="padding-left: 50px">
      <div class="stage-title" style="left: -30px">销售发货</div>
      <div class="flex-box">
        <span style="margin-right: 30px">工单编号：MQ005202</span>
        <span>SN码：80240710062</span>
      </div>
      <div class="flex-box center-box" style="margin-top: 20px">
        <div class="flow-section">
          <div>发货通知单</div>
          <div>FHTTZDTZD003771</div>
          <div>2024-08-16 10:24:37</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
        <div class="flow-section">
          <div>发货请检单</div>
          <div>FHTTZDTZD003771</div>
          <div>张三 | 2024-08-16 10:24:37</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
        <div class="flow-section">
          <div>PDA请检出库</div>
          <div>FHTTZDTZD003771</div>
          <div>张三 | 2024-08-16 10:24:37</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
        <div class="flow-section">
          <div>OQC质检</div>
          <div>FHTTZDTZD003771</div>
          <div>张三 | 2024-08-16 10:24:37</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
        <div class="flow-section">
          <div>检验</div>
          <div>FHTTZDTZD003771</div>
          <div>张三 | 2024-08-16 10:24:37</div>
          <div
            style="display: flex; justify-content: center; align-items: center"
          >
            <img src="./down-arrow.png" />不通过
          </div>
          <div>返工生产</div>
          <div>生产工单：MQQ005800</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
        <div class="flow-section">
          <div>销售出库单</div>
          <div>FHTTZDTZD003771</div>
          <div>张三 | 2024-08-16 10:24:37</div>
          <div
            style="display: flex; justify-content: center; align-items: center"
          >
            <img src="./down-arrow.png" />
          </div>
          <div>PDA成品出库</div>
          <div>田俊 | 2024-08-16 15:30：10</div>
        </div>
      </div>
    </div>
    <div class="stage-box">
      <div class="stage-title" style="left: -30px">售后</div>
      <div class="flex-box">
        <span style="margin-right: 30px">工单编号：MQ005202</span>
        <span>SN码：80240710062</span>
      </div>
      <div class="flex-box center-box" style="margin-top: 20px">
        <div class="flow-section">
          <div>维修</div>
          <div>2024-08-16 10:24:37</div>
        </div>
        <img
          src="./right-arrow.png"
          style="height: fit-content; margin: 20px"
        />
        <div class="flow-section">
          <div>保养</div>
          <div>张三 | 2024-08-16 10:24:37</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "compreTrace",
  data() {
    return {
      procureDataList: [], //采购阶段
      produceData: {}, //生产
      formData: {
        workOrderCode: "MO005817",
        snCode: "80240810039",
        productReportNum: null,
        productReportTime: null,
        fqcNum: "FQC1723185997649", //FQC质检单编号
        fqcCreateTime: "2024-08-09 14:46:38", //FQC质检单创建时间
        fqcCheckTime: "2024-08-09 14:49:29", //FQC质检单检验时间
        checkUser: "刘磊", //FQC质检单检验员
        checkResult: 1, //FQC质检单检验结果  1-合格 0-不合格
        productRecptNum: null,
        productRecptTime: null,
        qcDataList: [],
        wmDataList: [
          //仓储阶段
          {
            index: 1,
            wmName: "产品入库单",
            recptCode: "PRO202408090001",
            worker: "admin",
            opeTime: "2024-08-09 16:14:19",
          },
          {
            index: 2,
            wmName: "PDA成品入库",
            recptCode: "PRO202408090001",
            worker: "",
            opeTime: "2024-08-09 16:14:41",
          },
        ],
        saleDataList: [],
        procureDataList: [
          //采购阶段
          {
            index: 1,
            name: "收料通知单",
            num: "CGSL020693",
            worker: null,
            opeTime: "2024-08-26 11:08:39",
            result: null,
          },
          {
            index: 2,
            name: "审核人|审核日期",
            num: null,
            worker: null,
            opeTime: null,
            result: null,
          },
          {
            index: 3,
            name: "IQC检验单",
            num: "CGSL020693",
            worker: "王君",
            opeTime: "2024-08-26 11:08:40",
            result: null,
          },
          {
            index: 4,
            name: "检验人|检验时间",
            num: null,
            worker: "李文",
            opeTime: "2024-08-26 11:09:25",
            result: "1", //1合格 0不合格
          },
          {
            index: 5,
            name: "物料入库单",
            num: "R20240826010",
            worker: "李文",
            opeTime: "2024-08-26 11:09:28",
            result: null,
          },
          {
            index: 7,
            name: "PDA序列号绑定",
            num: null,
            worker: "李文",
            opeTime: "2024-08-26 11:09:28",
            result: null,
          },
        ],
        produceData: {
          //生产阶段
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          proFeedPreventIdList: null,
          feedId: null,
          workorderId: null,
          workorderCode: "MO005817", //工单号
          workorderName: null,
          processId: null,
          processName: null,
          processCode: null,
          productId: null,
          productCode: null,
          productName: null,
          snCode: "80240810039", //SN码
          startReporting: "2024-08-09T10:39:00.000+08:00", //上料防错时间
          finishReporting: "2024-08-09T14:25:05.000+08:00", //报工时间
          itemList: null,
          status: null,
          oldSnCode: null,
          workstationCode: null,
          workstationName: "电桩三线分装一", //工位
          lineId: null,
          lineName: null,
          workshopCode: null,
          workshopName: null,
          workshopId: null,
          productSpc: null,
          userName: "陈李帅", //操作工
          workstationId: null,
          material: null,
          downtime: null,
          reportTime: null,
          actualTime: null,
          checkTime: "2024-08-09 10:44:27", //工位自检时间
          itemCode: null,
          itemName: null,
          specification: null,
          snCodeItem: null,
          skip: null,
        },
      },
    };
  },
  created() {},
  mounted(){
    this.init(this.formData)
  },
  methods: {
    init(formData) {
      this.procureDataList = formData.procureDataList;
      this.produceData = formData.produceData
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 12px 34px;
  font-size: 14px;
}
.title {
  font-size: 20px;
  background: #4ec4c5;
  padding: 10px;
  color: #fff;
}
.stage-box {
  ::v-deep {
    .el-card__body {
      padding: 8px;
    }
  }
  .sn-flow-box {
    padding: 12px;
    margin-left: 20px;
  }
  border-left: 1px dotted #ccc;
  padding: 16px;
  border-bottom: 1px dotted #ccc;
  position: relative;
  .stage-title {
    position: absolute;
    padding: 4px;
    background: #fff;
    left: -16px;
    top: 50%;
  }
  .sn-box {
    width: 100px;

    height: 50px;
    text-align: center;
    line-height: 20px;
    background-color: #e7faf0;
    color: #13ce66;
    padding-top: 4px;
  }
  .sn-box-arrow {
    width: 0;
    height: 0;
    border-bottom: 25px solid transparent;
    border-top: 25px solid transparent;
    border-left: 25px solid #e7faf0;
  }
}
.box-card {
  width: 25%;
}
.arrows-bottom {
  width: 100%;
  margin-top: 14px;
  .arrows-line {
    width: 6px;
    height: 24px;
    background: #2ecc71;
    margin: 0 auto;
  }
  .arrows {
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 6px solid #2ecc71;
    margin: 0 auto;
  }
}
.collect-box {
  width: 100%;
  background-color: #ffe9d0;
  padding: 8px 16px;
  border-radius: 5px;
  text-align: center;
  font-size: 15px;
}
.flex-box {
  display: flex;
}
.center-box {
  text-align: center;
}
.max-box {
  width: max-content;
}
</style>
